<template>
    <!-- 显示作者(频道)信息的组件之一 -->
    <div class="author4-component-container">
        <router-link class="author4-component-head"
                     :to="{name:'Index',params:{channelid:channelInfo.id}}">
            <img v-lazy="channelInfo.hostUserIcon + '?x-oss-process=image/resize,w_200'"/>
        </router-link>
        <router-link class="author4-component-info"
                     :to="{name:'Index',params:{channelid:channelInfo.id}}">
            <div class="author4-component-title">{{channelInfo.name}}</div>
            <div class="author4-component-data">
                {{info.buildTime&&toFullCommonTime(info.buildTime)}}&nbsp;
            </div>
        </router-link>
        <div class="author4-component-nav">
            <router-link href="Javascript:;"
                         :to="{name:'Index',params:{channelid:channelInfo.id}}">
                <img src="../assets/images/hand-left.png"/>&nbsp;去频道
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            channelInfo: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        mounted: function () {
            // setTimeout(function() {
            //     console.log("+++++++++++++++++++++++++++++++");
            //     console.log(JSON.stringify(this.info, undefined, 2));
            //     console.log("+++++++++++++++++++++++++++++++");
            //     console.log(JSON.stringify(this.channelInfo, undefined, 2));
            //     console.log("+++++++++++++++++++++++++++++++");
            // }, 5000);
        }
    }
</script>

<style>
    .author4-component-container {
        height: 34px;
        margin: 1.0rem auto;
    }

    .author4-component-head, .author4-component-info {
        height: 34px;
        float: left;
        text-decoration: none;
    }

    .author4-component-head {
        width: 34px;
    }

    .author4-component-head img {
        display: block;
        width: 34px;
        height: 34px;
        border-radius: 5px;
        object-fit: cover;
    }

    .author4-component-info {
        margin-left: 0.4rem;
        font-size: 13px;
    }

    .author4-component-title, .author4-component-info {
        line-height: 17px;

    }

    .author4-component-info {
        color: #787878;
    }

    .author4-component-data {
    }

    .author4-component-data img {
        height: 13px;
        /* vertical-align: middle; */
        position: relative;
        top: 1px;
    }

    .author4-component-nav {
        font-size: 13px;
        height: 34px;
        line-height: 34px;
        float: right;
        text-decoration: none;
    }

    .author4-component-nav a,
    .author4-component-nav a:link,
    .author4-component-nav a:visited {
        text-decoration: none;
        color: #9852FF;
    }

    .author4-component-nav a img {
        width: 15px;
        vertical-align: text-bottom;
    }
</style>